<template>
	<view class="container">
		<view class="v-header">
			<view class="v-header-item" :class="datas.TabIndex == 1 ? 'v-header-item-active' : ''" @click="nav(1)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.QB }}</view>
				<view class="v-header-item-title">全部</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 2 ? 'v-header-item-active' : ''" @click="nav(2)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.ZT }}</view>
				<view class="v-header-item-title">直推</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 3 ? 'v-header-item-active' : ''" @click="nav(3)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.SX }}</view>
				<view class="v-header-item-title">伞下</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 4 ? 'v-header-item-active' : ''" @click="nav(4)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.HY }}</view>
				<view class="v-header-item-title">活跃</view>
			</view>
			<view class="v-header-item" :class="datas.TabIndex == 5 ? 'v-header-item-active' : ''" @click="nav(5)">
				<view class="v-header-item-count">{{ datas.StatisticInfo.JT }}</view>
				<view class="v-header-item-title">静态</view>
			</view>
		</view>

		<view class="v-conent">
			<view class="v-conent-summary">
				成本合计：{{ datas.StatisticInfo.CBHJ||0.0 }}
			</view>
			<view class="v-item" v-for="(item, index) in datas.MemberStatisticInfos">
				<view class="v-top">
					<image :src="item.ICon" mode="aspectFit"></image>
					<view class="v-item-nickname">{{ item.UserInfo.NickName }}</view>
					<view class="v-item-createtime">{{ item.UserInfo.CreateTime }}</view>
				</view>
				<view class="v-contents">
					<view class="v-item-group">
						<view class="v-item-left">Tel：{{ item.UserInfo.Account }}</view>
						<view class="v-item-right">推荐人：{{ item.UserInfo.ParentName }}</view>
					</view>
					<view class="v-item-group">
						<view class="v-item-title">今日成本：{{ item.LJZC_CB_JR_OF_ORDER||0.0 }}</view>
					</view>
					<view class="v-item-title-Sec" v-for="(order,index) in item.JR_ORDER_LIST">
						{{index+1}}、{{order.Price}} 元
					</view>
					<!-- <view class="v-item-group">
						<view class="v-item-left">今日收益：{{ item.LJSY_JR }}</view>
						<view class="v-item-right">累计收益(周)：{{ item.LJSY_BZ }}</view>
					</view> -->
					<view class="v-item-op">
						<view class="v-item-op-detail" @click="viewTeamDetail(item)">团队明细</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
	export default {
		data() {
			return {
				messageText: '',
				msgType: 'success',
				duration: 2000,

				datas: {
					UserId: '',
					TabIndex: 1,
					StatisticInfo: {
						QB: 0,
						ZT: 0,
						SX: 0,
						HY: 0,
						JT: 0
					},
					MemberStatisticInfos: [
						// {
						// 	Id: '00000-0000-00-000',
						// 	Account: '18653262913',
						// 	NickName: '哈哈',
						// 	ICon: '../../static/bj.png',
						// 	CreateTime: '2024-02-23 15:32',
						// 	ZTR: '许七明',
						// 	JRSY: 2356.23,
						// 	LJSY: 2356.34
						// },
					]
				}
			};
		},
		methods: {
			viewTeamDetail: function(item) {
				let _this = this;
				console.log(_this.datas.UserId)
				if (item.UserInfo.Id != _this.datas.UserId) {
					uni.navigateTo({
						url: `/pages/sys/my-team?UserId=${item.UserInfo.Id}`
					});
				}
			},
			nav: function(index) {
				let _this = this;
				_this.datas.TabIndex = index;

				//正式代码
				var authToken = authTokenUtil();
				var queryData = {
					MemberType: _this.datas.TabIndex,
					UserId: _this.datas.UserId
				};
				uni.request({
					url: _this.sysInfo.BasePath + 'Sys/GetMyTeamInfo',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						Authorization: `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res);
							_this.datas.MemberStatisticInfos = res.data.Data.Members;
							_this.datas.StatisticInfo.QB = res.data.Data.QB;
							_this.datas.StatisticInfo.ZT = res.data.Data.ZT;
							_this.datas.StatisticInfo.SX = res.data.Data.SX;
							_this.datas.StatisticInfo.HY = res.data.Data.HY;
							_this.datas.StatisticInfo.JT = res.data.Data.JT;
							_this.datas.StatisticInfo.CBHJ = res.data.Data.CBHJ;
						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载我的团队信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载我的团队信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});
			},
			init: function() {
				let _this = this;
				console.log('init');
				_this.nav(1);
			}
		},
		onShow() {
			let _this = this;
			// _this.init();
		},
		onLoad(options) {
			let _this = this;
			_this.datas.UserId = options.UserId;

			_this.init();
			// options 包含了查询参数
			console.log(_this.datas.UserId);
		},
		created() {
			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: "/pages/account/login"
				})
			})
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		/* background-color: #f0f0f0; */
	}

	.v-header {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		box-sizing: border-box;
		font-size: 26rpx;
		background-color: #fff;
		height: 130rpx !important;
		color: #333;
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		z-index: 10001;
	}

	.v-header-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		flex: 1;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.v-header-item-active {
		border-bottom: 2px solid #c93a00ff;
		color: #c93a00ff;
	}

	.v-header-item-count {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		font-size: 32rpx;
		font-weight: bold;
	}

	.v-header-item-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		font-size: 26rpx;
	}

	.v-conent {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		margin-top: 150rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.v-conent-summary {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		color: #333;
		font-size: 28rpx;
		font-weight: bold;
	}

	.v-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		background-color: #fff;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0rpx 5rpx 10rpx #999;
	}

	.v-top {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		height: 50rpx;
	}

	.v-top image {
		height: 40rpx;
		width: 40rpx;
		margin-right: 20rpx;
	}

	.v-item-nickname {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	.v-item-createtime {
		font-size: 26rpx;
	}

	.v-contents {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		margin-top: 30rpx;
	}

	.v-item-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		font-size: 26rpx;
		height: 50rpx;
	}

	.v-item-group {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		font-size: 26rpx;
		color: #333;
		height: 60rpx;
	}

	.v-item-left {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex: 1;
	}

	.v-item-right {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex: 1;
	}

	.v-item-op {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		margin-top: 10rpx;
	}

	.v-item-op-detail {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #c93a00ff;
		border-radius: 50rpx;
		height: 62rpx;
		width: 180rpx;
		font-size: 26rpx;
		color: #fff;
	}
</style>